/**
 * 简历查重-modal,招聘需求--简历录入，人才库---简历录入
 */
import React, { useCallback, useEffect, useState } from 'react';
import { Modal, Spin, Alert, Avatar, Icon, Row, Button } from 'antd';
import { history } from 'umi'
import cn from 'classnames';
import styles from './index.less';
import DuplicateResumeList from '../DuplicateResumeList';

/**
 * 简历重复时出现的modal弹窗
 */
const ResumeRepeatModal = ({
    duplicateResumeArr = [],
    isTalent,
    onOk,
    visible = false,
    talentInfo,
    onCancel,
    ...rest
}) => {
    const [loading, setLoading] = useState(false);
    const { finalParams = {}, originInfo = {}, currentInfo = {} } = talentInfo; // 上级传来的候选人信息----人才库使用。
    const { isBlacklist, resumeLabel, resumeStep } = originInfo;
    const isCancel = ![2, 3].includes(resumeLabel); // 如果不在这两个阶段，是不可以编辑的  2=已取消(各种取消) 3=淘汰(各种淘汰)
    const onJumpResumeCompare = useCallback(() => {
        // onCancel(); // 点击查看简历，不关闭弹窗。。
        sessionStorage.setItem(
            '__NEW_RESUME_DATA__',
            JSON.stringify({
                ...finalParams,
                talentAvatar: talentInfo?._uplodedImg
            })
        ); // 新输入简历保存到sessionStorage中，供简历对比页面使用
        history.push({
            pathname: '/office/personnelManagement/recruitment/resume/record/compare',
            query: {
                resumeId: originInfo.resumeId
            },
            state: { tabRoute: true, tabRefresh: true }
        });
    }, [finalParams]);
    const getMessage = () => {
        let message = '发现重复简历正在应聘其他岗位，请查看进度信息。确定录入并覆盖已有简历？';
        // 下面是三个禁止更新简历的状态
        if (isBlacklist) {
            message = '该简历已在黑名单，请先移出黑名单后更新！';
        } else if (resumeStep === 3 && isCancel) {
            message = '该简历已在面试阶段，不支持更新简历！';
        } else if (resumeStep === 4 && isCancel) {
            message = '该简历已在录用阶段，不支持更新简历！';
        }
        return message;
    };
    /**
     * true 为新增，人才库状态需过滤不可覆盖的状态
     */
    const isQuery = isTalent
        ? !(isBlacklist || (resumeStep === 3 && isCancel) || (resumeStep === 4 && isCancel))
        : true;

    useEffect(() => {
        setLoading(false);
    }, []);

    /**
     *  渲染从人才库进入特有的内容
     */
    const renderTalentInfo = () => {
        if (isTalent) {
            return (
                <>
                    <Alert
                        message={getMessage()}
                        className={styles.modeifyAlertForTalent}
                        type="warning"
                        showIcon
                        banner
                    />
                    <Row className={styles.modalWrap}>
                        {/* 人才库专属，查看简历那一块 */}
                        <div className={styles.talentInfoWrap}>
                            <Row type="flex" align="middle">
                                <Avatar
                                    style={{ background: 'rgba(248, 249, 248)' }}
                                    icon={<Icon type="user" style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
                                    size={56}
                                    src={originInfo.talentAvatar || talentInfo?._uplodedImg}
                                />
                                <div className={styles.infoWrap}>
                                    <span className={styles.title}>{originInfo.talentName}</span>
                                    <Row type="flex" align="middle" className={styles.gapWrapper}>
                                        <Row type="flex" align="middle">
                                            <i
                                                className={cn(
                                                    'icon',
                                                    'iconfont',
                                                    'iconinfos_phone_icon_default',
                                                    styles.icon
                                                )}
                                            />
                                            <span
                                                className={
                                                    originInfo.talentPhone === currentInfo.talentPhone
                                                        ? styles.repeat
                                                        : ''
                                                }
                                            >
                                                {originInfo.talentPhone}
                                            </span>
                                        </Row>
                                        <Row type="flex" align="middle">
                                            <i
                                                className={cn(
                                                    'icon',
                                                    'iconfont',
                                                    'iconinfos_mail_icon_default',
                                                    styles.icon
                                                )}
                                            />
                                            <span
                                                className={
                                                    originInfo.talentEmail === currentInfo.talentEmail
                                                        ? styles.repeat
                                                        : ''
                                                }
                                            >
                                                {originInfo.talentEmail}
                                            </span>
                                        </Row>
                                    </Row>
                                </div>
                            </Row>
                            <Button type="link" className={styles.modifyBtn} onClick={onJumpResumeCompare}>
                                查看简历
                            </Button>
                        </div>
                    </Row>
                </>
            );
        }
        return null;
    };

    const renderDuplicateList = () => {
        if (duplicateResumeArr.length > 0) {
            return (
                <>
                    {isTalent ? null : (
                        <Alert
                            message="发现重复简历正在应聘其他岗位，请查看进度信息。确定录入并覆盖已有简历？"
                            type="warning"
                            showIcon
                            banner
                            className={styles.modeifyAlert}
                        />
                    )}
                    <Row>
                        <DuplicateResumeList duplicateArr={duplicateResumeArr} />
                    </Row>
                </>
            );
        }
        return null;
    };

    const getOkText = () => {
        if (isTalent && !isQuery) {
            return '确认';
        }
        return '录入并覆盖';
    };

    return (
        <Modal
            {...rest}
            title="简历查重"
            visible={visible}
            okText={getOkText()}
            width={720}
            onOk={() => {
                onOk(isQuery, finalParams);
            }}
            onCancel={onCancel}
            confirmLoading={loading}
            destroyOnClose
            afterClose={() => {}}
            getContainer={() => document.querySelector('.ant-tabs-tabpane-active .ant-card-body')}
        >
            <Spin spinning={loading}>
                {renderTalentInfo()}
                {renderDuplicateList()}
            </Spin>
        </Modal>
    );
};

export default ResumeRepeatModal;
